<template>
	<view class="homepage">
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback"
			@up="upCallback">
			<view class="user-wrap">
				<!-- 此处添加背景图片标签 -->
				<view
					:style=" {backgroundImage:`url(${creator.bg_img||'https://s.0794cn.com/linlv/sku/1719505336956.png'})`}"
					class="background-mask"></view>
				<button open-type="share">
					<view class="share-wrapper">
						<u-icon name="/static/images/share_white.png" color="#fff" size="37"></u-icon>
					</view>
				</button>
				<u-navbar :border-bottom="false" back-icon-color="#fff" title=" " :background="navBackground">
					<view class="slot-wrap">
						<view class="avatar-image" :class="{ 'avatar-show':showAvatar }">
							<u-image width="50" height="50" shape="circle"
								:src="creator.avatar||'/static/images/my_portrait_empty.png'"></u-image>
						</view>
					</view>
				</u-navbar>
				<view class="user-container">
					<view class="user-box">
						<image class="avatar" :src="creator.avatar||'/static/images/my_portrait_empty.png'"
							@click.stop="previewImage([creator.avatar||'/static/images/my_portrait_empty.png'],0)">
						</image>
						<view class="avatar-right">
							<view @click="openNickName" class="nickname">
								{{ creator.nickname || (this.isOwner?'点击前去设置昵称':"匿名用户")  }}
							</view>
						</view>
						<!-- <view class="action-box">
							<view v-if="isFocusUser" class="chat-box" @click.stop="clickChatUser">
								私聊
							</view>
							<view v-if="isFocusUser" class="cancel-focus-box" @click.stop="clickFocusUser">
								取关
							</view>
							<view v-else class="focus-box" @click.stop="clickFocusUser">
								关注
							</view>
						</view> -->
					</view>
					<view class="introduction">
						<text user-select>{{creator.describtion }}</text>
					</view>
					<!-- <view class="tag-list-box">
						<view class="tag-box">
							
						</view>
					</view> -->
					<!-- 	<view class="footer">
						<view class="count-warp">
							<view class="count-container">
								<view class="count-box">
									<view class="count">
										150
									</view>
									<view class="text">
										关注
									</view>
								</view>
							</view>
							<view class="count-container">
								<view class="count-box">
									<view class="count">
										100
									</view>
									<view class="text">
										粉丝
									</view>
								</view>
							</view>
							<view class="count-container">
								<view class="count-box">
									<view class="count">
										150
									</view>
									<view class="text">
										获赞和收藏
									</view>
								</view>
							</view>
						</view>
						<view class="edit-info" @click.stop="goto('../my-info/my-info')">
							编辑资料
						</view>
					</view> -->
				</view>
			</view>
			<view class="list-container">
				<!-- 	<view class="top-box">
					<view class="">
						帖子
					</view>
				</view> -->
				<StarPostList :list="postList" :option="postOption" :my_user="vuex_user" @selectPost="selectPost"
					@clickChatUser="clickPostChatUser" @clickMore="clickMore" @clickSharePost="clickSharePost"
					@clickCommentPost="clickCommentPost" @toggleLike="togglePostLike">
				</StarPostList>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
	import StarPostList from '@/uni_modules/star-community/components/star-post-list/star-post-list.vue'
	import {
		toLogin
	} from '@/utils/login';
	import {
		getPost,
		getUserInfo
	} from "@/api/discover";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		getLink
	} from '@/config/app'
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [MescrollMixin, PageExposure], // 使用mixin
		components: {
			StarPostList,
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),
		},
		data() {
			return {
				isFocusUser: false,
				postList: [],
				userId: null,
				navBackground: {
					backgroundColor: 'rgba(0,0,0,0.3)',
				},
				showAvatar: false,
				postOption: {},
				isOwner: false,
				creator: {},
				vuex_user: {},
				downOption: {
					use: false, // 不启用mescroll下拉刷新，使用页面原生下拉刷新
				},
				upOption: {
					isBounce: false,
					noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					// toTop: {
					// 	right: '20rpx',
					// 	bottom: '140rpx',
					// 	safearea: true,
					// 	width: '80rpx',
					// 	radius: '50%',
					// }
				}
			};
		},
		// 原生下拉刷新，推荐
		onPullDownRefresh() {
			this.mescroll.resetUpScroll()
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			const top = uni.upx2px(698)
			const {
				scrollTop
			} = e
			const percent = scrollTop / top > 1 ? 1 : scrollTop / top
			let color = 'rgba(0,0,0,0.3)'
			if (percent < 0.3) {
				color = 'rgba(0,0,0,0.3)'
				this.showAvatar = false
			} else if (percent > 0.8) {
				color = 'rgba(0,0,0,0.8)'
			} else {
				color = `rgba(0,0,0,${percent})`
				this.showAvatar = true
			}
			this.navBackground = {
				backgroundColor: color,
			}
		},
		async onLoad(option) {
			let vuex_user = this.userInfo
			this.userId = option?.id
			this.creator = await this.getUser({
				id: option?.id
			})
			if (option?.id === vuex_user.id) {
				this.isOwner = true
			}
			// if (option?.id) {
			// 	// 根据id判断 我的主页 还是 ta的主页
			// 	let user_id = option.id
			// 	if (user_id === vuex_user.id) {
			// 		this.vuex_user = vuex_user
			// 	} else {
			// 		this.vuex_user = await this.getUser(user_id)
			// 	}
			// } else {
			// 	this.vuex_user = vuex_user
			// }
		},
		async onShareAppMessage() {
			if (!this.isLogin) {
				return toLogin();
			}
			return {
				title: this.creator.nickname,
				imageUrl: this.creator.avatar,
				path: '/social/pages/homepage/homepage?id=' + this.creator.id
			};
		},
		methods: {
			...mapMutations(['UPDATEPOSTLIKES']),
			// 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			async upCallback(page) {
				try {
					// 请求数据列表
					let list = await this.getPostList(page)
					// 设置列表数据
					if (page.num === 1) this.postList = [] // 如果是第一页需手动制空列表
					this.postList = [...this.postList, ...list] // 追加新数据
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态
					this.mescroll.endSuccess(list.length)
				} catch (err) {
					console.log(err)
				}
			},
			// 拉取帖子列表
			async getPostList(page) {
				const {
					s,
					d
				} = await getPost({
					pagesize: page.size,
					page: page.num,
					user_id: this.userId
				});
				const {
					data,
					num
				} = d || {}

				if (s === 0) {
					const _data = data?.data || [];
					this.UPDATEPOSTLIKES(_data);
					return _data
				}
				return []
			},
			// 获取用户信息
			async getUser(params) {
				return await getUserInfo(params)
			},
			// 点击关注用户
			clickFocusUser() {
				this.isFocusUser = !this.isFocusUser
			},
			openNickName() {
				if (this.isOwner) {
					this.goto('/bundle/pages/user_profile/user_profile')
				}
			},
			// 点击私聊用户
			clickChatUser() {
				uni.showToast({
					title: '私聊界面开发中',
					icon: 'none'
				})
			},
			// 选中贴子
			selectPost(post) {
				console.log(post);
				this.goto(`../post-detail/post-detail?id=${post.id}`)
			},
			// 长按帖子
			longpressPost(post) {
				// console.log('longpressPost');
				// this.showPostMoreActionSheet(post)
			},
			// 点击帖子更多
			clickMore(post) {
				console.log('clickMore');
				this.showPostMoreActionSheet(post)
			},
			// 点击评论帖子
			clickCommentPost(post) {
				console.log('clickCommentPost');
				// 建议跳转后自动下滑到评论区
				this.goto(`../post-detail/post-detail?id=${post.id}&comment`)
			},
			// 点赞帖子
			togglePostLike(post, isLiked) {
				console.log('togglePostLike', isLiked);
			},
			// 显示帖子更多操作菜单选项
			showPostMoreActionSheet(post) {
				uni.showActionSheet({
					itemList: ['举报'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						uni.showToast({
							title: '举报成功'
						})
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			goto(url) {
				uni.navigateTo({
					url
				})
			},
			// 点击预览图片
			previewImage(urls, current) {
				uni.previewImage({
					urls,
					current
				})
			},
		}
	}
</script>
<style>
	page {
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		width: 100%;
		flex: 1;
		overflow: hidden;

		.avatar-image {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: translateY(100rpx);
			transition: transform 0.3s ease;
		}

		.avatar-show {
			transform: translateY(0);
		}
	}

	.share-wrapper {
		justify-content: flex-end;
		padding-right: 7px;
		position: absolute;
		right: 42rpx;
		top: 198rpx;
		z-index: 9;
	}

	.homepage {
		box-sizing: border-box;
		background: #f6f6f6;

		.user-wrap {
			position: relative;

			.background-mask {
				z-index: 0;
				position: absolute;
				height: 536rpx;
				width: 100%;
				background-size: 100%;
			}

			.user-container {
				padding: 42rpx 28rpx 80rpx;
				position: relative;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.3);

				.user-box {
					width: 100%;
					display: inline-flex;

					.avatar {
						flex-shrink: 0;
						height: 160rpx;
						width: 160rpx;
						border-radius: 50%;
						margin-right: 28rpx;
					}

					.avatar-right {
						width: 100%;
						display: flex;
						align-items: center;

						.nickname {
							font-size: 32rpx;
							font-weight: 700;
							color: #fff;
						}
					}

					.action-box {
						flex-shrink: 0;
						display: inline-flex;
						align-items: center;

						.focus-box {
							margin-left: 30rpx;
							border: 2rpx #55aaff solid;
							border-radius: 100rpx;
							color: #55aaff;
							font-size: 28rpx;
							padding: 6rpx 20rpx;
						}

						.cancel-focus-box {
							@extend .focus-box;
							color: #ff0000;
							border-color: #ff0000;
						}

						.chat-box {
							@extend .focus-box;
						}
					}
				}

				.introduction {
					margin-top: 32rpx;
					color: #fff;
				}

				.footer {
					margin-top: 30rpx;
					width: 100%;
					display: inline-flex;
					align-items: center;

					.count-warp {
						flex: 1;
						display: inline-flex;

						.count-container {
							width: 130rpx;
							display: inline-flex;

							.count-box {
								font-size: 24rpx;
								text-align: center;

								// display: flex;
								// flex-direction: column;
								// justify-content: center;
								// align-items: center;

								.count {}

								.text {
									margin-top: 10rpx;
								}
							}
						}
					}

					.edit-info {
						border: 2rpx #616161 solid;
						padding: 10rpx 20rpx;
						border-radius: 100rpx;
					}
				}
			}
		}

		.list-container {
			position: relative;
			z-index: 2;
			margin-top: -50rpx;
			background-color: #fff;
			overflow: hidden;

			.top-box {
				padding-top: 20rpx;
				width: 100%;
				display: inline-flex;
				justify-content: center;
				font-size: 34rpx;
			}
		}
	}
</style>